<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="字典">
        <el-input v-model="data.dictInfo" placeholder="字典名称或编码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="querySysDict">查询</el-button>
      </el-form-item>
    </el-form>

    <yu-table ref="yuTable" :tableData="data.tableData" :columns="data.tableData.columns" @getSelectionRows="getSelectionRows">
      <template #toolbar>
        <el-button-group class="ml-4">
          <el-button @click="addDict">新增</el-button>
          <el-button @click="delBatch">删除</el-button>
          <el-button @click="cacheBtn">数据缓存</el-button>
        </el-button-group>
      </template>

      <template v-slot:dictCode="{ scopeData }">
        <el-button text size="small" type="danger" @click="editSysDict(scopeData.row, scopeData.row.dictCode)"
          >{{ scopeData.row.dictCode }}
        </el-button></template
      >

      <template v-slot:ruleStuts="{ scopeData }">
        <el-switch
          v-model="scopeData.row.isStop"
          class="tablescope"
          @change="changeIsStop($event, scopeData.row)"
          active-value="0"
          inactive-value="1"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
      </template>
    </yu-table>
    <yu-dialog :data="data.dictItem" v-model:isShow="data.dictItem.isShow">
      <dictEdit :editData="data.editData" v-model:isShow="data.dictItem.isShow" />
    </yu-dialog>
    <yu-dialog :data="data.dictDetail" v-model:data="data.dictDetail.isShow">
      <dictEdit :editData="data.editData" v-model:isShow="data.dictDetail.isShow" />
    </yu-dialog>
  </div>
</template>

<script setup>
  import { reactive, ref, getCurrentInstance, onBeforeMount } from 'vue';
  import dictEdit from './DictItem.vue';
  import YuTable from '@/components/com/YuTable.vue';
  const { proxy } = getCurrentInstance();
  const data = reactive({
    tableData: { data: [], columns: [], tableArrts: {} },
    dictInfo: '',
    dictDetail: { isShow: false, dialogConfig: { title: '' } },
    dictItem: { isShow: false, dialogConfig: { title: '' } },
    editData: {},
  });
  const yuTable = ref(null);
  data.tableData.columns = [
    { type: 'selection' },
    { title: '字典编码', key: 'dictCode', align: 'left', slot: 'dictCode' },
    { title: '字典名称', key: 'dictName', align: 'left' },
    { title: '是否静态数据', key: 'isStatic', align: 'center' },
    {
      title: '是否停用',
      key: 'isStop',
      tooltip: true,
      align: 'center',
      slot: 'ruleStuts',
      width: 100,
    },
    { title: '备注说明', key: 'remark' },
  ];
  onBeforeMount(() => {
    //进页面触发查询
    querySysDict();
  });
  const querySysDict = async () => {
    debugger;
    await proxy.$api.data.querySysDict({ dictInfo: data.dictInfo }).then(res => {
      data.tableData.data = res;
    });
  };
  const cacheBtn = () => {
    let selectRows = yuTable.value.selectRows;
    if (selectRows.length > 0) {
      proxy
        .$confirm('是否缓存选中字典?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'primary',
        })
        .then(() => {
          proxy.$api.data.cacheSysDict(selectRows).then(res => {
            if (res.code != -1) {
              proxy.$message({
                type: 'success',
                message: res.msg,
              });
            } else {
              proxy.$message({
                type: 'error',
                message: res.msg,
              });
            }
          });
        });
    } else {
      proxy
        .$confirm('是否缓存所有字典?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'primary',
        })
        .then(() => {
          proxy.$api.data.cacheSysDict([]).then(res => {
            if (res.code != -1) {
              proxy.$message({
                type: 'success',
                message: res.msg,
              });
            } else {
              proxy.$message({
                type: 'error',
                message: res.msg,
              });
            }
          });
        });
    }
  };
  const changeIsStop = async (value, row) => {};
  const addDict = () => {
    data.dictItem.isShow = true;
    data.dictItem.dialogConfig.title = '新增';
    data.editData = {};
  };

  const delBatch = () => {
    let selectRows = yuTable.value.selectRows;
    if (selectRows.length > 0) {
      proxy
        .$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          proxy.$api.data.delSysDict(selectRows).then(res => {
            if (res.code != -1) {
              proxy.$message({
                type: 'success',
                message: res.msg,
              });
              yuTable.value.deleteRows();
            } else {
              proxy.$message({
                type: 'error',
                message: res.msg,
              });
            }
          });
        });
    } else {
      proxy.$message({
        type: 'error',
        message: '请选择删除数据',
      });
    }
  };
  const editSysDict = (row, value) => {
    data.dictItem.isShow = true;
    data.dictItem.dialogConfig.title = '修改';
    data.editData = row;
  };
</script>

<style lang="scss" scoped></style>
